export const useProjectManagerDetailTag = (options, router) => {
  const activeTabsValue = ref();
  const detailTabs = ref([]);

  const routerTo = (name) => {
    router.push({
      name: 'workbench-homepage',
      params: { option: name },
    });
  };

  if (options && options.length) {
    activeTabsValue.value = options[0].value;
    detailTabs.value.push({
      title: options[0].label,
      name: options[0].value,
    });
  }

  const addTab = (value) => {
    const index = detailTabs.value.findIndex(tab => tab.name === value);
    activeTabsValue.value = value;

    if (index === -1) {
      const opt = options.find(item => item.value === value);

      detailTabs.value.push({
        title: opt.label,
        name: value,
      });
    }

    routerTo(value);
  };
  const removeTab = (targetName) => {
    const tabs = detailTabs.value;
    let activeName = activeTabsValue.value;

    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.name;
          }
        }
      });
    }

    activeTabsValue.value = activeName;
    detailTabs.value = tabs.filter(tab => tab.name !== targetName);
    routerTo(activeName);
  };

  return {
    activeTabsValue,
    detailTabs,
    addTab,
    removeTab,
    routerTo,
  };
};
